{% set publicise_page="cards" %}
{% extends "publisher/publicise/_publisher_publicise_layout.html" %}

{% block publicise_content %}
  <div class="row">
    <h4>Promote your snap using embeddable responsive card</h4>
  </div>
  <div class="p-strip is-shallow u-no-padding--top">
    <div class="row">
      <div class="col-2">
        <label>
          Snap Store button:
        </label>
      </div>
      <div class="col-7">
          <input type="radio" name="store-button" id="store-button-dark" checked="checked" value="black">
          <label for="store-button-dark">Dark</label>
          <input type="radio" name="store-button" id="store-button-light" value="white">
          <label for="store-button-light">Light</label>
          <input type="radio" name="store-button" id="store-button-hide" value="">
          <label for="store-button-hide">Hide button</label>
      </div>
    </div>
  </div>
  <div class="p-strip is-shallow u-no-padding--top">
    <div class="row">
      <div class="col-2">
        Options:
      </div>
      <div class="col-7" id="js-options">
          <input type="checkbox" name="show-channels" id="option-show-channels" checked>
          <label for="option-show-channels">Show all channels</label>
          <input type="checkbox" name="show-summary" id="option-show-summary" checked>
          <label for="option-show-summary">Show summary</label>
          <input type="checkbox" name="show-screenshot" id="option-show-screenshot" {% if not has_screenshot %}disabled{% else %}checked{% endif %}>
          <label for="option-show-screenshot">Show screenshot</label>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-2">
      <label>Preview:</label>
    </div>
    <div class="col-7">
      <iframe id="embedded-card-frame"
        class="snapcraft-publicise__embedded-frame"
        src="/{{snap_name}}/embedded?button=black&channels=true&summary=true&screenshot=true"
        width="100%" height="320px"
        frameborder="0" style="border: 1px solid #CCC; border-radius: 2px;">
      </iframe>
    </div>
  </div>

  <div class="row">
    <div class="col-2">
      <label>HTML:</label>
    </div>
    <div class="col-7">
      <div class="p-code-copyable not-cli">
        <code class="p-code-copyable__input" id="snippet-card-html">&lt;iframe src="https://snapcraft.io/{{ snap_name }}/embedded?button=black&channels=true&summary=true&screenshot=true" frameborder="0" width="100%" height="320px" style="border: 1px solid #CCC; border-radius: 2px;" &gt;&lt;/iframe&gt;</code>
        <button class="p-code-copyable__action js-clipboard-copy" data-clipboard-target="#snippet-card-html">Copy to clipboard</button>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts_modules %}
<script src="{{ static_url('js/modules/clipboard.min.js') }}" defer></script>
{% endblock %}

{% block scripts_includes %}
<script src="{{ static_url('js/dist/publisher.js') }}" defer></script>
{% endblock %}

{% block scripts %}
<script>
  window.addEventListener("DOMContentLoaded", function() {
    Raven.context(function () {
      snapcraft.publisher.publicise.initEmbeddedCardPicker({
        snapName: "{{ snap_name }}",
        previewFrame: document.getElementById('embedded-card-frame'),
        codeElement: document.getElementById('snippet-card-html'),
        buttonRadios: document.querySelectorAll("input[name=store-button]"),
        optionButtons: document.querySelectorAll("#js-options input[type=checkbox]")
      });

      if (typeof ClipboardJS !== 'undefined') {
        new ClipboardJS('.js-clipboard-copy');
      }
    });
  });
</script>
{% endblock %}
